<template>
  <div class="loginWrapper">
    <div class="login">
      <!-- <video id="video" width="100%" height="100%" autoplay="autoplay" muted="muted" loop="loop"
        src="../../../../static/vedio/login.mp4"></video> -->
      <img :src="imgscroll">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px" class="login-container">
        <p class="loginTitle"><img src="../../../../static/img/logo2.png" alt=""> 信息化协同工作平台</p>
        <div class="loginForm">
          <el-form-item prop="loginName" class="usrRow">
            <i class="loginIcon el-icon-user"></i><input class="usr" type="text" maxlength="28" autofocus v-model="ruleForm.loginName" placeholder="请输入用户名">
          </el-form-item>
          <el-form-item prop="password" class="pwdRow">
            <i class="loginIcon el-icon-lock"></i><input class="pwd" type="password" maxlength="36" v-model="ruleForm.password" placeholder="请输入密码" @keyup.enter="handleSubmit">
          </el-form-item>
          <el-form-item class="btnRow">
            <el-button type="primary" size="large" @click.native.prevent="handleSubmit" :loading="logining">登 录</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { platRest } from '@/api/platformApi'
import { login } from '@/api/teamworkApi'
import { setToken, removeToken } from '@/utils/auth'
import { Encrypt } from '@/utils/aesUtil.js'
export default {
  data () {
    return {
      logining: false,
      ruleForm: {
        loginName: 'apachi',
        password: ''
      },
      rules: {
        loginName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      imgscroll: '../../../../static/img/bg1.jpg'
    }
  },
  created () {
  },
  mounted () {
    this.imgChange()
  },
  methods: {
    // 设置视频播放速度
    videoSpeed () {
      document.getElementById('video').playbackRate = 0.4
    },
    // 设置图片轮播
    imgChange () {
      let index = 0
      this.timer = setInterval(() => {
        if (index > 4) {
          index = 0
        }
        index += 1
        this.imgscroll = require('../../../../static/img/bg' + index + '.jpg')
      }, 3500)
    },
    handleSubmit () {
      let _this = this
      // 删除已有token
      removeToken()
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let d = {
            loginName: this.ruleForm.loginName,
            password: this.ruleForm.password
          }
          // console.log(d)
          // console.log(JSON.stringify(d))
          let e = {
            str: Encrypt(JSON.stringify(d))
          }
          this.logining = true
          login.getLogin(e).then(res => {
            if (res.token) {
              setToken(res.token)
              _this.$router.push('./')
            } else {
              if (res.msg === '用户异常') {
                 this.error(res.msg)
              } else {
                this.error('用户名或密码错误')
              }
            }
            this.logining = false
          }).catch(() => {
            this.logining = false
          })
        } else {
          return false
        }
      })
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }
}

</script>

<style lang="scss" scoped>
  .loginWrapper {
    width: 100%;
    height: 100%;
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .login {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    & > img {
      width: 100vw;
      height: 100vh;
    }
    .login-container {
      width: 390px;
      height: 440px;
      font-size: 16px;
      position: absolute;
      top: 15%;
      right: 10%;
      background: rgba(0,0,0,0.2);
      border-radius: 4px;
    }
  }
  .loginTitle {
    color: white;
    font-size: 26px;
    letter-spacing: 2px;
    margin: 13% 0;
    font-weight: bold;
    padding-left: 30px;
    img {
      width: 50px;
      vertical-align: middle
    }
  }
  div.loginForm {
    width: 300px;
    margin: 0 auto;
  }
  div.loginForm .loginIcon {
    font-size: 30px;
    border: none;
    color: white;
    vertical-align: middle;
    margin-top: 10px;
  }
  div.loginForm input {
    width: calc(100% - 51px);
    box-sizing: border-box;
    height: 46px;
    outline: none;
    border: none;
    background: none;
    border-bottom: 1px solid white;
    padding-left: 4px;
    color: white;
    font-size: 14px;
    margin-left: 10px;
  }
  .el-button--primary {
    color: #fff;
    background-color: #1989F9;
    border-color: #1989F9;
    width: 300px;
    height: 46px;
    font-family: "Microsoft YaHei";
    font-size: 16px;
  }

</style>
<style>
  .loginWrapper .pwdRow {
    margin-bottom: 32px;
    border-radius: 4px;
  }

  .loginWrapper .el-button--primary{
    color: rgb(186, 205, 224);
    background-color: rgb(11, 26, 50);
    border: none;
    transition: all .3;
    margin-top: 34px;
    letter-spacing: 4px;
    font-weight: bolder;
  }
  .loginWrapper .el-button--primary:hover {
    opacity: 0.6;
  }
  .loginWrapper .el-form-item--small .el-form-item__error {
    padding: 6px 0 0 40px;
  }
</style>
